<template>
    <div class="image-component" :style="style">
        <img v-if="!mode" :src="src" alt="" :style="imgStyle">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "LImage",
        props: {
            mode: {
                type: String,
                default: 'cover'
            },
            position: {
                type: String,
                default: 'center center'
            },
            src: String,
            imgStyle: String,
            alt: String,
            width: String,
            height: String,
        },
        data() {
            return {}
        },
        computed: {
            style() {
                let {width, height,position} = this
                if (width) {
                    width = width / 75 + 'rem'
                }
                if (height) {
                    height = height / 75 + 'rem'
                }

                let obj = {
                    width,
                    height,
                }

                if (this.mode === 'cover') {
                    if (!width) {
                        obj.width = `auto`
                    }

                    obj.backgroundImage = `url(${this.src})`
                    obj.backgroundPosition = `${position}`
                }
                return obj
            }
        },
        components: {},
        created() {
        },
        methods: {},
    }
</script>

<style lang="scss" scoped>
    .image-component {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

        img {
            display: block;
            max-width: 100%;
        }
    }
</style>
